<template>
  <div id="my_box">
    <van-nav-bar title="个人中心" left-arrow @click-left="onClickLeft" @click-right="onClickRight">
      <template #right>
        <van-icon name="setting-o" @click="goset()"/>
      </template>
    </van-nav-bar>
    <div class="peoPic">
      <div>
        <van-image round width="100" height="100" src="https://img01.yzcdn.cn/vant/cat.jpeg" />
      </div>
      <div class="login_">
        <router-link to="/login">{{msg}}</router-link>
      </div>
    </div>
    <div class="order">
      <van-grid>
        <van-grid-item icon="refund-o" text="待付款" />
        <van-grid-item icon="shop-o" text="待收货" />
        <van-grid-item icon="thumb-circle-o" text="待评价" />
        <van-grid-item icon="orders-o" text="全部订单" />
      </van-grid>
      <van-cell title="地址管理" is-link to="index" />
      <van-cell title="我的收藏夹" is-link to="index" />
      <van-cell title="关于我们" is-link to="index" />
      <h2 class="logo">
        <img src="../../assets/logo.png" alt />
      </h2>
    </div>

    <FooterBarVue class="foot"></FooterBarVue>
  </div>
</template>

<script>
import FooterBarVue from "@/components/footerVue.vue";
export default {
  name: "My",
  components: {
    FooterBarVue
  },
  data() {
    return {
      msg: "请点击登录"
    };
  },
  created() {
    let msg1 = localStorage.getItem("tel");
    console.log(msg1);
    this.msg = "您好" + msg1;
    // window.location.reload()
  },
  methods: {
    onClickLeft() {
      console.log("返回");
    },
    onClickRight() {
      console.log("按钮");
    },
    goset(){
      this.$router.push('/setone')
    }
  }
};
</script>

<style scoped>
#my_box {
  height: 100%;
  position: relative;
}
.foot {
  position: absolute;
  bottom: 0;
}
.peoPic {
  width: 100%;
  height: 7.5rem;
  box-sizing: border-box;
  background-color: #f6d2d2;
  padding: 0.625rem;
  display: flex;
}
.login_ {
  margin-left: 1.25rem;
  align-self: center;
  font-size: 1.25rem;
}
h2 {
  text-align: center;
}
</style>